<template>
  <view class="message-container">
    <card class="message-card" :thumb="cardThumb">
      <view class="input-container">
        <input class="message-input" placeholder="医生ID" v-model="doctorId" />
        <input class="message-input" placeholder="留言内容" v-model="messageContent" />
        <input class="message-input" placeholder="用户ID" v-model="userId" />
      </view>
      <view class="button-container">
        <button class="create-button" @tap="onCreateMessage">创建留言</button>
      </view>
    </card>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { postMessageAPI } from '@/services/message'; // 请根据实际路径修改

// [const cardThumb = 'https://example.com/card-thumb.jpg';] // 请替换为您的卡片缩略图链接
const doctorId = ref('');
const messageContent = ref('');
const userId = ref('');

const onCreateMessage = async () => {
  try {
    // 调用留言接口
    const response = await postMessageAPI({
      doctorId: doctorId.value,
      msg: messageContent.value,
      userId: userId.value,
    });

    // 处理留言成功的逻辑
    console.log('留言成功：', response);

    // 弹出提示
    uni.showToast({
      title: '留言创建成功',
      icon: 'success',
      duration: 2000,
    });

    // 返回上一页面
    uni.navigateBack();
  } catch (error) {
    // 处理留言失败的逻辑
    console.error('留言失败：', error);

    // 弹出提示
    uni.showToast({
      title: '留言创建失败',
      icon: 'none',
      duration: 2000,
    });
  }
};
</script>


<style scoped>
.message-container {
  padding: 20rpx;
}

.message-card {
  border-radius: 10rpx; /* 设置圆角 */
}

.input-container {
  padding: 20rpx;
}

.message-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx; /* 设置输入框圆角 */
  padding: 10rpx;
}

.button-container {
  padding: 20rpx;
  text-align: center;
}

.create-button {
  width: 80%;
  height: 60rpx;
  background-color: #007AFF;
  color: #fff;
  border: none;
  border-radius: 5rpx; /* 设置按钮圆角 */
}
</style>
